<!DOCTYPE html>
<html>
    <head>
        <title>TEEEM (&#945; 0.3)</title>

        <script src="js/lib/require.min.js" data-main="app"></script>
        <link href="css/normalize.css" rel="stylesheet" type="text/css"/>
        <link href="css/TEEEM.css" rel="stylesheet" type="text/css"/>
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="/ckeditor/skins/moono/editor.css">

    </head>
    <body>
        <div id="loading">
            <i class="fa fa-refresh fa-spin"></i>
        </div>
        <div id="log">
            <div>Some error message!
            </div>
        </div>
        <div id="sidebar">
            <div class="title"><span data-holo="TEEEM">TEEEM</span></div>
            <hr>
            <div class="profile clearfix">

            </div>
            <hr>
            <div class="content clearfix">

            </div>
            <hr>
        </div>
        <div id="contentArea">
            <div id="header">
                <div class="feed">
                    <div style="padding:10px 20px;">
                        <ul>
                            <li id="contextMenu"><i class="fa fa-bars"></i>

                                <div id="contextMenuContent">
                                    <div data-menu="feed" data-change-screen="feed"><i class="fa fa-list"></i> &nbsp; Feed</div>
                                    <div data-menu="login" data-change-screen="login"><i class="fa fa-sign-in"></i> &nbsp; Login</div>
                                    <div data-menu="logout"><i class="fa fa-sign-out"></i> &nbsp; Logout</div>
                                    <div data-menu="profile" data-change-screen="profile"><i class="fa fa-user"></i> &nbsp; Profile</div>
                                    <div data-menu="settings" data-change-screen="settings"><i class="fa fa-cog"></i> &nbsp; Settings</div>
                                </div>
                            </li>
                            <!--<li><i class="fa fa-cog"></i></li>-->
                        </ul>
                        <div id="version" style="float: left">&#945; 0.3</div>
                        <span data-holo="TEEEM">TEEEM</span>
                    </div>
                </div>
            </div>


            <div id="main">
                <div data-screen="feed" style="display:none;">
                    <div id="userPost" class="messages">
                        <div class="message clearfix" style="margin-bottom: 0">
                            <div class="left">
                                <div title="<%=name%>"
                                     class="image"
                                     style="background-image:url('<%=image%>');background-size:cover;">
                                </div>
                            </div>
                            <div class="center">
                                <div class="name">
                                    <span data-holo=""></span>
                                </div>
                                <div class="content">
                                    <div style="color: #999">
                                        <div style="width:100%" id="editor" contenteditable="true">
                                            <p style="color: #aaa">Post Something...</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn" id="submitPost">Submit &nbsp; <i class="fa fa-check"></i></div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div id="messages">
                        <!-- ALL MESSAGES -->
                    </div>
                </div>
            </div>


            <div data-screen="settings" id="settings" style="display:none;">
                <!-- ALL SETTINGS -->
            </div>


            <div data-screen="login" id="login" style="display:none;">
                <!-- ALL LOGIN -->

                <div class="field">
                    <div class="label">Username</div>
                    <input data-login="username" type="text" placeholder="" value="">
                </div>
                <div class="field">
                    <div class="label">Password</div>
                    <input data-login="password" type="password" placeholder="">
                </div>
                <div>
                    <span id="loginSubmit" class="btn">Login &nbsp; <i class="fa fa-user"></i></span>
                </div>
            </div>

            <div data-screen="profile" id="profile" style="display:none;">

            </div>
        </div>

        </div>
    </body>
</html>

<script type="text/html" data-template='sidebarProfile'>
    <div class="name">
        <span data-holo="<%=name%>"><%=name%></span>
    </div>
    <div title="<%=name%>"
         class="image"
         style="background-image:url('<%=image%>');background-size:cover;">
    </div>
    <div class="description">
        <%=description%>
    </div>
</script>

<script type="text/html" data-template='messageProfile'>
    <h2>About You</h2>
    <hr class="header">
    <div class="field">
        <div class="label">Username</div>
        <%=username%>
    </div>
    <div class="field">
        <div class="label">Name</div>
        <input data-profile-field="name" type="text" placeholder="Full Name" value="<%=name%>">
    </div>
    <div class="field">
        <div class="label">Email</div>
        <input data-profile-field="email" type="text" placeholder="Full Name" value="<%=email%>">
    </div>
    <div class="field">
        <div class="label">Profile Picture URL</div>
        <input data-profile-field="image" type="text" placeholder="http://..." value="<%=image%>">
    </div>
    <h2>Password</h2>
    <hr class="header">
    <div class="field">
        <div class="label">Old Password</div>
        <input type="password" value="">
    </div>
    <div class="field">
        <div class="label">New Password</div>
        <input type="password" value="">
    </div>
    <div class="field">
        <div class="label">Repeat Password</div>
        <input type="password">
    </div>
</script>

<script type="text/html" data-template='message'>
    <div class="message clearfix">
        <div class="left">
            <div title="<%=name%>"
                 class="image"
                 data-show-user="<%=id%>"
                 style="background-image:url('<%=image%>');background-size:cover;">
            </div>
        </div>
        <div class="center">
            <div class="name">
                <span data-holo="<%=name%>"><%=name%></span>
            </div>
            <div class="content">
                <%=content%>
            </div>
        </div>
    </div>
</script>